<template>
  <Content title="历史记录">
    <view class="device-details">
      <view class="content">
        <!-- <view class="header-box">
          <u-search
            placeholder="请输入姓名进行搜索"
            v-model="search.name"
            :clearabled="true"
            :showAction="false"
            @search="query"
          ></u-search>
        </view> -->
        <Records
          ref="orderList"
          :scrollNoData="scrollNoData"
          :data="data"
          @itemClick="itemClick"
          @onRefresh="onRefresh"
          @scrollBottom="scrollBottom"
        ></Records>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import { getPageData } from "@/store/user";
import Records from "./components/records";
export default {
  components: {
    Content,
    Records,
  },
  data() {
    return {
      model: {},
      data: [],
      search: {
        workOrder: "",
        pageNum: 1,
        pageSize: 10,
      },
      navIndex: 0,
      id: "",
      show: false,
      modalTitle: "",
      radioGroup: "",
      materialCode: "",
      scroll: false,
      scrollNoData: false,
      obj: {},
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.search.workOrder = option.workOrder;
  },
  onShow: function () {},
  onReady: function () {
    this.getList();
  },
  computed: {},
  mounted() {},
  methods: {
    onRefresh() {
      this.getList(true);
    },
    ok() {},
    scrollBottom(next) {
      const that = this;
      if (!that.scrollNoData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList().then(() => {
          next(that.scrollNoData);
        });
        return;
      }
      next();
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (element) obj[key] = element;
        }
      }
      return fetch(
        "post",
        "/dms/mobileEnd/queryMaterialOperationRecordList",
        obj
      ).then(({ data }) => {
        if (that.scroll) {
          if ((data?.records || []).length === 0) {
            that.scrollNoData = true;
          } else {
            that.data.push(...data?.records);
          }
        } else {
          that.data = data?.records || [];
        }
        that.$loading.close();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  .header {
    font-weight: 600;
    margin-bottom: 20rpx;
    padding: 0 40rpx;
  }
  .header-box {
    padding: 5px 10px 5px;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }

  .number-davities-box {
    text-align: center;
    .header {
      margin-bottom: 20rpx;
    }
    .item-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }
  .btn-box {
    display: flex;
    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
